<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>云端视频库</title>
  <style>
    /* 主题变量 */
    :root {
      --primary-color: #1a73e8;
      --primary-gradient: linear-gradient(135deg, #1a73e8, #35a2f2);
      --card-bg: #ffffff;
      --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      --hover-shadow: 0 8px 24px rgba(26, 115, 232, 0.15);
      --transition-speed: 0.3s;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: 'Segoe UI', system-ui, sans-serif;
      background: #f5f9ff;
      color: #333;
      line-height: 1.6;
    }

    .container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 40px 20px;
    }

    /* 头部样式 */
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 20px;
      margin-bottom: 40px;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 24px;
      font-weight: bold;
      color: var(--primary-color);
      background: white;
      padding: 8px 20px;
      border-radius: 12px;
      box-shadow: var(--shadow);
    }

    .logo::before {
      content: '';
      width: 32px;
      height: 32px;
      background: var(--primary-gradient);
      border-radius: 8px;
      display: inline-block;
    }

    a.back-link {
      display: inline-block;
      margin-bottom: 1.5rem;
      color: #1a73e8;
      text-decoration: none;
      font-weight: 500;
    }

    a.back-link:hover {
      text-decoration: underline;
    }
    
    /* 上传区域 */
    .upload-card {
      background: white;
      border-radius: 15px;
      padding: 30px;
      box-shadow: var(--shadow);
      margin-bottom: 40px;
      position: relative;
      overflow: hidden;
    }

    .upload-card::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: var(--primary-gradient);
    }

    .upload-form {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      align-items: center;
      justify-content: space-between;
    }

    .file-input {
      flex: 1 1 400px;
      padding: 16px 20px;
      border: 2px dashed #e0e0e0;
      border-radius: 10px;
      font-size: 16px;
      background: #f8f9fa;
      transition: all 0.3s;
    }

    .file-input:focus {
      border-color: var(--primary-color);
      background: #e6f0ff;
    }

    .upload-btn {
      padding: 14px 30px;
      border-radius: 8px;
      border: none;
      background: var(--primary-gradient);
      color: white;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.3s;
      box-shadow: 0 4px 16px rgba(26, 115, 232, 0.3);
    }

    .upload-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(26, 115, 232, 0.4);
    }

    /* 状态提示 */
    #status {
      margin-top: 20px;
      padding: 16px 20px;
      border-radius: 8px;
      font-size: 15px;
      display: flex;
      align-items: center;
      gap: 10px;
      animation: fadeIn 0.5s ease-in-out;
      background: #e6f0ff;
      color: #1a73e8;
    }

    #status svg {
      width: 24px;
      height: 24px;
    }

    /* 搜索区域 */
    .search-container {
      position: relative;
      max-width: 600px;
      margin-bottom: 40px;
    }

    .search-input {
      width: 100%;
      padding: 14px 40px 14px 20px;
      border-radius: 25px;
      border: 2px solid #e0e0e0;
      font-size: 16px;
      transition: all 0.3s;
      background: white;
    }

    .search-input:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.15);
    }

    .search-icon {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
      height: 20px;
      fill: #999;
      transition: fill 0.3s;
    }

    .search-input:focus + .search-icon {
      fill: var(--primary-color);
    }

    /* 视频网格 */
    .video-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 30px;
    }

    .video-card {
      background: white;
      border-radius: 15px;
      overflow: hidden;
      box-shadow: var(--shadow);
      transition: all var(--transition-speed) ease-in-out;
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .video-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--hover-shadow);
    }

    .thumbnail {
      position: relative;
      overflow: hidden;
      padding-top: 56.25%;
    }

    .thumbnail img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform var(--transition-speed);
    }

    .thumbnail:hover img {
      transform: scale(1.05);
    }

    .thumbnail:hover .play-button {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }

    .play-button {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.8);
      background: rgba(26, 115, 232, 0.9);
      border: none;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: all var(--transition-speed);
      box-shadow: 0 4px 16px rgba(26, 115, 232, 0.4);
    }

    .play-button svg {
      fill: white;
      width: 32px;
      height: 32px;
    }

    .video-content {
      padding: 24px;
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
    }

    .video-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 12px;
      color: #1a73e8;
      line-height: 1.4;
      min-height: 48px;
    }

    .video-info {
      margin-bottom: 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .info-item {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #666;
      font-size: 14px;
    }

    .info-item svg {
      width: 16px;
      height: 16px;
      fill: #999;
    }

    .delete-btn {
      margin-top: auto;
      align-self: flex-start;
      background: #e53935;
      color: white;
      border: none;
      padding: 10px 16px;
      border-radius: 6px;
      font-weight: 500;
      cursor: pointer;
      transition: all var(--transition-speed);
    }

    .delete-btn:hover {
      background: #b71c1c;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(229, 57, 53, 0.3);
    }

    /* 空状态 */
    .empty-state {
      grid-column: 1 / -1;
      padding: 60px 20px;
      text-align: center;
      background: #f8f9fa;
      border-radius: 15px;
      color: #666;
      font-size: 18px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }

    .empty-state svg {
      width: 80px;
      height: 80px;
      fill: #ddd;
    }

    /* 分页控件 */
    .pagination {
      grid-column: 1 / -1;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 15px;
      margin-top: 40px;
    }

    .page-btn {
      padding: 10px 16px;
      border-radius: 8px;
      border: 1px solid #e0e0e0;
      background: white;
      color: #333;
      cursor: pointer;
      transition: all 0.3s;
    }

    .page-btn:hover {
      background: var(--primary-color);
      color: white;
      border-color: var(--primary-color);
    }

    .page-number {
      padding: 10px 16px;
      border-radius: 8px;
      background: #e6f0ff;
      color: #1a73e8;
      font-weight: bold;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
      .upload-form {
        flex-direction: column;
        gap: 20px;
      }

      .search-container {
        margin-bottom: 30px;
      }

      .video-title {
        font-size: 16px;
        min-height: 36px;
      }

      .info-item svg {
        width: 14px;
        height: 14px;
      }
    }

    /* 动画效果 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(-10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .spinner {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 2px solid #fff;
      border-top-color: transparent;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      vertical-align: middle;
      margin-right: 8px;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- 页面头部 -->
    <div class="header">
      <div class="logo">云端视频库</div>
      <div class="search-container">
        <input type="text" id="searchInput" class="search-input" placeholder="搜索视频..." oninput="filterSearch()">
        <svg class="search-icon" viewBox="0 0 24 24">
          <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>
    </div>
    <a href="index.html" class="back-link">← 返回导航页</a>
    <!-- 上传区域 -->
    <div class="upload-card">
      <form id="uploadForm" class="upload-form" enctype="multipart/form-data">
        <input type="file" name="video" accept="video/*" required class="file-input">
        <button type="submit" class="upload-btn">上传视频</button>
      </form>
      <div id="status"></div>
    </div>

    <!-- 视频列表 -->
    <div class="video-grid" id="videoGrid"></div>

    <!-- 分页控件 -->
    <div class="pagination" id="pagination"></div>
  </div>

  <script>
    let searchQuery = '';
    let currentPage = 1;
    const videosPerPage = 6;
    
    function filterSearch() {
      searchQuery = document.getElementById('searchInput').value.trim().toLowerCase();
      currentPage = 1;
      loadVideos();
    }

    function loadVideos() {
      fetch('http://47.109.75.129:3000/videos')
        .then(res => res.json())
        .then(videos => {
          const filtered = videos.filter(video => {
            const query = searchQuery.toLowerCase();
            return query === '' ||
                   video.filename.toLowerCase().includes(query) ||
                   video.url.toLowerCase().includes(query);
          });
          
          const grid = document.getElementById('videoGrid');
          const pagination = document.getElementById('pagination');
          
          if (filtered.length === 0) {
            grid.innerHTML = `
              <div class="empty-state">
                <svg viewBox="0 0 24 24">
                  <path d="M4 6h16v12H4z" stroke="#999" stroke-width="2" fill="none"/>
                  <path d="M9 12l4 3 4-5" stroke="#999" stroke-width="2" fill="none"/>
                </svg>
                <div>暂无视频</div>
              </div>
            `;
            pagination.innerHTML = '';
            return;
          }
          
          // 分页处理
          const totalPages = Math.ceil(filtered.length / videosPerPage);
          const paginatedVideos = filtered.slice(
            (currentPage - 1) * videosPerPage,
            currentPage * videosPerPage
          );
          
          grid.innerHTML = paginatedVideos.map(video => `
            <div class="video-card">
              <div class="thumbnail">
                <img src="${video.thumbnail}" onerror="this.src='https://via.placeholder.com/320x180?text=Loading...'" alt="缩略图">
                <button class="play-button" onclick="window.open('${video.url}', '_blank')">
                  <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z" /></svg>
                </button>
              </div>
              <div class="video-content">
                <div class="video-title">${video.filename}</div>
                <div class="video-info">
                  <div class="info-item">
                    <svg viewBox="0 0 24 24">
                      <path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" stroke="currentColor" stroke-width="2" fill="none"/>
                    </svg>
                    <span>${video.duration || '00:00:00'}</span>
                  </div>
                  <div class="info-item">
                    <svg viewBox="0 0 24 24">
                      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z" fill="currentColor"/>
                    </svg>
                    <span>${new Date(video.uploadTime).toLocaleDateString() || '未知'}</span>
                  </div>
                </div>
                <button class="delete-btn" onclick="deleteVideo('${video.filename}')">删除</button>
              </div>
            </div>
          `).join('');
          
          // 渲染分页控件
          pagination.innerHTML = `
            <button class="page-btn" onclick="changePage(${Math.max(1, currentPage - 1)})" ${currentPage === 1 ? 'disabled' : ''}>上一页</button>
            <div class="page-number">第 ${currentPage} 页 / 共 ${totalPages} 页</div>
            <button class="page-btn" onclick="changePage(${Math.min(totalPages, currentPage + 1)})" ${currentPage === totalPages ? 'disabled' : ''}>下一页</button>
          `;
        })
        .catch(err => {
          document.getElementById('videoGrid').innerHTML = `
            <div class="empty-state" style="color: #c62828">
              <svg viewBox="0 0 24 24">
                <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="#c62828" stroke-width="2" fill="none"/>
              </svg>
              <div>加载失败：${err.message}</div>
            </div>
          `;
        });
    }

    function changePage(page) {
      currentPage = page;
      loadVideos();
    }

    function deleteVideo(filename) {
      if (!confirm(`确定要删除 "${filename}" 吗？`)) return;
      fetch(`http://47.109.75.129:3000/videos/${filename}`, {
        method: 'DELETE'
      }).then(res => {
        if (!res.ok) throw new Error('删除失败');
        loadVideos();
      }).catch(err => alert(err.message));
    }

    // 文件上传逻辑
    document.getElementById('uploadForm').addEventListener('submit', function(e) {
      e.preventDefault();
      const formData = new FormData(this);
      const statusDiv = document.getElementById('status');
      statusDiv.innerHTML = `
        <div class="loading">
          <span class="spinner"></span>
          <span>上传中，请稍候...</span>
        </div>
      `;
      
      fetch('http://47.109.75.129:3000/upload', {
        method: 'POST',
        body: formData
      }).then(res => {
        if (!res.ok) throw new Error('上传失败（HTTP 错误）');
        return res.json();
      }).then(data => {
        statusDiv.innerHTML = `
          <div class="success">
            <svg viewBox="0 0 24 24">
              <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
            </svg>
            上传成功！视频地址：<br>
            <a href="${data.videoUrl}" target="_blank">${data.videoUrl}</a>
          </div>
        `;
        
        // 3秒后自动清除提示
        setTimeout(() => {
          statusDiv.innerHTML = '';
          this.reset(); // 重置表单
        }, 3000);
        
        loadVideos();
      }).catch(err => {
        statusDiv.innerHTML = `
          <div class="error">
            <svg viewBox="0 0 24 24">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" />
            </svg>
            上传失败：${err.message}
          </div>
        `;
      });
    });

    // 页面加载初始化
    window.addEventListener('load', loadVideos);
  </script>
</body>
</html>